<template>
  <div class="meeting-room-use-rate chart-box1">
    <div class="chart-title">会议室使用率</div>
    <div class="chart-content">
      <div :id="chartId"></div>
      <div>
        <div class="text-number-1">
          <div>可使用</div>
          <div class="number">
            <count-to
              :start-val="data.enable_count.oldVal"
              :end-val="data.enable_count.newVal"
              :duration="3000"
            />
          </div>
        </div>
        <div class="text-number-1">
          <div>会议室总数</div>
          <div class="number">
            <count-to
              :start-val="data.total_count.oldVal"
              :end-val="data.total_count.newVal"
              :duration="3000"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  watch,
  onBeforeUnmount,
  nextTick,
  toRaw,
} from "vue";
import { Chart } from "@antv/g2";
import CountTo from "../countTo/index.vue";
import common from "../../utils/common";
import store from "../../../../store";

export default defineComponent({
  name: "MeetingRoomUseRate",
  components: { CountTo },
  setup(props) {
    const state = reactive({
      chart: null,
      chartId: "meetingRoomUseRateChart",
      data: {
        enable_count: { ...common.countToInit },
        total_count: { ...common.countToInit },
      },
    });

    const initChart = () => {
      const enable_count_ratio = state.data.enable_count.newVal
        ? Math.ceil(
            (Number(state.data.enable_count.newVal) /
              Number(state.data.total_count.newVal)) *
              100
          )
        : 100;
      const data = [
        { type: "占用中", value: 100 - enable_count_ratio },
        { type: "空闲中", value: enable_count_ratio },
      ];
      state.chart = new Chart({
        container: state.chartId,
        autoFit: true,
      });
      state.chart.data(data);
      state.chart.legend(false);
      state.chart.tooltip(false);
      state.chart.coordinate("theta", {
        radius: 1,
        innerRadius: 0.8,
      });
      state.chart
        .interval()
        .adjust("stack")
        .position("value")
        .color("type", ["#1890ff", "rgba(255,255,255,0.1)"]);

      state.chart.annotation().text({
        position: ["50%", "42%"],
        content: data[0].value + "%",
        style: {
          fontSize: 18,
          fill: "#fff",
          fontWeight: 500,
          textAlign: "center",
        },
        offsetY: 10,
      });

      state.chart.render();
    };

    watch(
      () => store.getters.synthetical.MeetingroomTotal,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { MeetingroomTotal } = store.getters.synthetical;
      if (MeetingroomTotal) {
        for (let key in MeetingroomTotal) {
          let newItem = {
            oldVal: state.data[key]["newVal"],
            newVal: Number(MeetingroomTotal[key]),
          };
          state.data[key] = { ...newItem };
        }
        if (state.chart) {
          const enable_count_ratio = state.data.enable_count.newVal
            ? Math.ceil(
                (Number(state.data.enable_count.newVal) /
                  Number(state.data.total_count.newVal)) *
                  100
              )
            : 100;
          const data = [
            { type: "占用中", value: 100 - enable_count_ratio },
            { type: "空闲中", value: enable_count_ratio },
          ];
          state.chart.changeData(toRaw(data));
        } else {
          nextTick(() => {
            initChart();
          });
        }
      }
    };

    onMounted(() => {
      getData();
    });

    onBeforeUnmount(() => {
      const chartBox = document.getElementById(state.chartId);
      if (chartBox) {
        chartBox.innerHTML = "";
      }
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";
.meeting-room-use-rate {
  .chart-content {
    display: flex;
    align-items: center;
    #meetingRoomUseRateChart {
      width: 60%;
      height: 100%;
    }
  }
}
</style>
